<template>
  <div class="publish">
    <studio-header from="publish" />
    <div class="content-box">
      <!-- knowledge graph publish code here -->
      <div
        class="gis-map-container"
        :style="{
          height: '100%',
        }"
      >
        <preview-k-gis-map
          v-if="layerList.length > 0"
          ref="knowledgeGisMap"
          :id-name="'publish-map'"
        ></preview-k-gis-map>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import StudioHeader from '@/components/studio/StudioHeader.vue'
import KGraphStore from '@/store/modules/k-graph'
import PreviewKGisMap from '@/components/knowledge-gis/PreviewKGisMap.vue'
import axios from '@/api/http'
import { setWatermark } from '@/util/util'
import ProjectStore from '@/store/modules/project'

@Component({
  components: {
    StudioHeader,
    PreviewKGisMap,
  },
})
export default class KnowledgePublish extends Vue {
  public async created() {
    KGraphStore.changeVisualizationMode('publish')
  }

  public get layerList() {
    return KGraphStore?.layerList ?? []
  }

  public mounted() {
    axios
      .request({
        // 根据发布的token获取数据
        url: `/dashboard/${this.$route.params.token}`,
      })
      .then(async (response) => {
        if (response.data.code === 100 && response.data.result.id) {
          const layout = response.data.result.publishLayout
            ? JSON.parse(response.data.result.publishLayout)
            : {}
          const { id, showWatermark, name, publishNo } = response.data.result

          //  设置filter 选项
          KGraphStore.setFilterRawData({
            filterItems: layout.filterItems,
          })
          //  设置graph id
          KGraphStore.setGraphId(layout.kgId)

          console.log(layout, 'okok')
          //  配置projectId
          KGraphStore.setProjectId(Number(response.data.result.projectId))
          //  设置dashboard infp
          KGraphStore.setKGDashBoard({
            layout,
            id,
          })
          //  初始化checked filter items
          this.initFilterCheckedItem(layout)

          //  get & set entityLayer 用于搜索功能
          KGraphStore.setEntityLayer(layout.entityLayer)

          //  set publishNo
          KGraphStore.setPublishNo(publishNo)

          //  是否显示水印 - 根据后端返回的配置参数决定
          if (showWatermark) {
            this.createWaterMark()
          }

          //  设置 显示label 的参数
          KGraphStore.setSysSetting(layout.sysSetting)

          //  set system Name
          ProjectStore.setActiveProject({
            id,
            name,
            type: 0,
          })
        } else {
          this.$message.error(response.data.message)
        }
      })
  }

  initFilterCheckedItem(info: any) {
    //  set filter checked edge
    if (info?.checkedFilterItems) {
      const { edgeFilter, classFilter } = info.checkedFilterItems
      KGraphStore.setRelationKeys(edgeFilter)

      const parsedClassFilter = Array.isArray(classFilter)
        ? classFilter
        : JSON.parse(classFilter)
      console.log(parsedClassFilter, 'parsedClassFilter')
      console.log(edgeFilter, 'edgeFilter')
      if (Array.isArray(classFilter)) {
        //  set filter checked class
        KGraphStore.setClassKeys(parsedClassFilter)
      } else {
        const result: any = []
        Object.keys(parsedClassFilter).forEach((key) => {
          if (!result.includes(key)) {
            result.push(key)
          }
          if (parsedClassFilter[key] !== undefined) {
            parsedClassFilter[key].forEach((item: any) => {
              result.push(item)
            })
          }
        })

        //  set filter checked class
        KGraphStore.setClassKeys(result)
      }
    }
  }
  //  绘制水印
  private createWaterMark() {
    const areaName = '.content-box'
    setTimeout(() => {
      setWatermark('之江见微可视分析平台', areaName, true)
    }, 500)
  }
}
</script>

<style lang="less" scoped>
.publish {
  background-color: #ebeaef;
  height: 100vh;
  width: 100%;

  .content-box {
    background: var(--content-box-bg);
    height: calc(100vh - 64px);
    overflow-y: auto;
    width: 100%;
  }
}
</style>
